<template>
  <div :id="props.question.questionId" class="question-container">
    <!-- 题目 -->
    <div class="question-title">
      <span>{{ index }}.</span>
      <span class="title">
        【<common-enum-view :enum-name="'QuestionType'" :enum-value="props.question.questionType" />】
        <paper-content :content="props.question.questionTitle" />
        <span>（{{ props.question.questionScore }}分）</span>
      </span>
    </div>
    <!-- 选项 -->
    <div class="question-option">
      <div v-if="props.question.questionType === 1">
        <!-- 单选题 -->
        <el-radio-group v-model="formModel.userAnswer" @change="handleAnswer">
          <div class="question-option-item">
            <div v-for="(item, index) in props.question.options" :key="index">
              <el-radio :value="item.optionContent">
                <div class="item">
                  <span>{{ changeNumToEn(index) }}、</span>
                  <paper-content :content="item.optionContent" />
                </div>
              </el-radio>
            </div>
          </div>
        </el-radio-group>
      </div>
      <div v-if="props.question.questionType === 2">
        <!-- 多选题 -->
        <el-checkbox-group v-model="formModel.userAnswers" @change="handleAnswer">
          <div class="question-option-item">
            <div v-for="(item, index) in props.question.options" :key="index">
              <el-checkbox :value="item.optionContent">
                <div class="item">
                  <span>{{ changeNumToEn(index) }}、</span>
                  <paper-content :content="item.optionContent" />
                </div>
              </el-checkbox>
            </div>
          </div>
        </el-checkbox-group>
      </div>
      <div v-if="props.question.questionType === 3">
        <!-- 判断题 -->
        <el-radio-group v-model="formModel.userAnswer" @change="handleAnswer">
          <div class="question-option-item">
            <div v-for="(item, index) in props.question.options" :key="index">
              <el-radio :value="item.optionContent">
                <div class="item">
                  <paper-content :content="item.optionContent" />
                </div>
              </el-radio>
            </div>
          </div>
        </el-radio-group>
      </div>

      <!-- 填空题 -->
      <div v-if="props.question.questionType === 4">
        <div v-for="(num, i) in props.question.optionCount" :key="i">
          <el-input v-model="formModel.userAnswers[i]" :placeholder="'请输入空 ' + num + ' 的答案'" @blur="handleAnswer" />
        </div>
      </div>

      <!-- 简答题 -->
      <div v-if="props.question.questionType === 5">
        <el-input v-model="formModel.userAnswer" type="textarea" placeholder="请输入答案" @blur="handleAnswer" />
      </div>
    </div>
  </div>
</template>

<script setup>
  import { examApi } from '~/api/exam'
  import { changeNumToEn } from '~/utils/base'

  const props = defineProps({
    question: {
      // 题目
      type: Object,
      default: () => {}
    },
    index: {
      // 题号
      type: Number,
      default: 0
    },
    recordId: {
      // 场次ID
      type: String,
      default: ''
    }
  })

  const emit = defineEmits(['updateAnswer'])

  // 答题
  const handleAnswer = async () => {
    // 多选题、填空题特殊处理
    if (props.question.questionType === 2 || props.question.questionType === 4) {
      formModel.userAnswer = formModel.userAnswers.join('|')
    }
    await examApi.examAnswerSave(formModel)
    emit('updateAnswer', formModel)
  }

  const formModel = reactive({
    recordId: props.recordId,
    questionId: props.question.questionId,
    userAnswer: props.question.userAnswer,
    userAnswers: props.question.userAnswer ? props.question.userAnswer.split('|') : []
  })
</script>
<style lang="scss" scoped>
  .question-container {
    flex: 1;
    margin-bottom: 10px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    font-size: 16px;
    line-height: 50px;
    .question-title {
      display: flex;
      line-height: 25px;
      .title {
        margin-bottom: 10px;
      }
    }
    .question-option {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      .question-option-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        .item {
          display: flex;
          align-items: baseline;
        }
      }
    }
    :deep(p) {
      margin: 0;
      display: inline;
    }
  }
</style>
